<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员</title>
    <link rel="stylesheet" href="../../css/system/system.css">
    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../js/public/jquery-3.3.1.js"></script>
  <style>
    .layui-input-block{
      width: 280px;
    }
  </style>
</head>
<body>
    <div class="main" >
       <div class="left">
           <ul>
               <li class="active"><i></i><a href="./manage.html">管理员</a></li>
               <li><i></i><a href="./userGroup.html">用户组</a></li>
               <!--<li><i></i><a href="./jurisdiction.html">权限管理</a></li>-->
               <!--<li><i></i><a href="./backMenu.html">后台菜单</a></li>-->
           </ul>
       </div>
       <div class="right">
            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
               <button class="addManage" data-method="notice" data-type="auto">添加管理员</button>
            </div>
           <div class="rl-table">
                <table class="layui-table" ay-skin="nob" id='table1' lay-filter="table1"></table>
           </div>
       </div>
    </div>
    <div id="hide">
       <div class="hideContent layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入管理员姓名" autocomplete="off" class="layui-input">
                </div>  
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入请输入手机号码" autocomplete="off" class="layui-input">
                </div>  
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>  
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>  
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
                </div>  
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">所在组</label>
              <div class="layui-input-block" id="group"></div>
            </div>
            <div class="layui-form-item">
                    <label class="layui-form-label">邮件类型</label>
                    <div class="layui-input-block">
                      <input type="radio" name="sex" value="禁用" title="禁用" checked>
                      <input type="radio" name="sex" value="正常" title="正常" >
                      <input type="radio" name="sex" value="未验证" title="未验证" >
                    </div>
            </div>
       </div>
    </div>
</body>
<script src="../../layui/layui.js"></script>
<script src="../../js/system/system.js"></script>
<script type="text/html" id="barDemo">
    <a href="#" class="edit">编辑</a>
    <a href="#" class="del" lay-event="del">删除</a>
</script>
<script>
  $(document).ready(function () {
    var groups="";
    for(var i=0;i<9;i++){
      groups=groups+'<input type="checkbox" lay-skin="primary" title="'+i+'">';
    }
    $("#group").html(groups);
  });

    //  $("#nav").load("../public/nav.html")
     //组件
     layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#table1'
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox',minWidth:80,unresize: true}
      ,{field: 'id', title: 'ID', minWidth:80,unresize: true}
      ,{field: 'username', title: '用户名', minWidth:80,unresize: true}
      ,{field: 'phone', title: '电话号码', minWidth:120,unresize: true}
      ,{field: 'mail', title: '邮箱', minWidth:160,unresize: true}
      ,{field: 'lastTime', title: '最后一次登录时间', minWidth: 180,unresize: true}
      ,{field: 'lastIP', title: '最后一次登录IP地址', minWidth: 180,unresize: true}
      ,{field: 'status', title: '状态', minWidth: 80,unresize: true}
      ,{field: 'options', title: '操作', minWidth: 130,toolbar: '#barDemo',unresize: true,fixed:'right'}
    ]]
    ,data:[{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{ 
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    },{
        "id": "01"
        , "username": 'ADMIN'
        , "phone": 13012312345
        , "mail": '12345@123.COM'
        , "lastTime": '2018.01.01 18:00:00'
        , "lastIP": '114.222.12.11'
        , "status": "正常"
    }]
  });
  //表格操作弹窗
table.on('tool(table1)', function (obj){
    var data = obj.data;
    if (obj.event === 'del'){
        layer.open({
                        type: 1,
                        title: '信息',
                        closeBtn: 1,
                        shade:0,
                        area: ['300px', '200px'],
                        id: 'delSure', //设定一个id，防止重复弹出
                        btn: ['确定','取消'],
                        btnAlign: 'r',
                        content:'确定删除吗？',
                        yes: function () {
                       layer.closeAll();
                       layer.msg('删除成功');
                       }
                    });
    }
  })
});

layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
         $ = layui.jquery, //弹框
        layer = layui.layer;
      laypage.render({
        elem: 'demo3'
        , prev: '<em><</em>'
        , next: '<em>></em>'
        , count: 100
        , layout: ['limit', 'skip', 'prev', 'page', 'next']
        , jump: function (obj) {
          console.log(obj)
        }
      });
    })
    //弹窗
    $('.addManage').click(function(){
      layer.open({
                        type: 1,
                        title: '新增管理员',
                        closeBtn: 1,
                        area: '710px;',
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['提交','重置'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content:$('#hide'),
                        shade:0,
                        success: function (layero) {
                            // var btn = layero.find('.layui-layer-btn');
                            // btn.find('.layui-layer-btn0').attr({
                            //     href: '#',
                            //     target: '_blank'
                            // });
                        }
                    });
                    
    })
            $('#layerDemo .layui-btn').on('click', function () {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
</script>
</html>